var w = document.body.clientWidth
var h = document.body.clientHeight
var arrBalls = []
for (var i = 0; i < 50; i++) {
    //定义一个球
    var ball = document.createElement('div')
    ball.style.position = 'absolute'
    ball.style.left = Math.random() * (w - 120) + 'px'
    ball.style.top = Math.random() * (h - 120) + 'px'
    ball.style.borderRadius = '50%'
    ball.style.width = Math.random()*200 +'px'
    ball.style.height = ball.style.width
    ball.style.backgroundColor = 'hsl('+Math.random()*255+',30%,60%)'
    ball.dataset['directX'] = 1
    ball.dataset['directY'] = 1
    document.body.appendChild(ball)//写在页面上

    arrBalls.push(ball)
}


// var directX = 1
// var directY = 1

function move(){
    for (var i = 0; i < arrBalls.length; i++) {
        var ball = arrBalls[i]
        if (ball.offsetLeft + ball.offsetWidth >= w) {
            ball.dataset['directX'] = -1
        }
        if (ball.offsetLeft <= 0) {
            ball.dataset['directX'] = 1
            ball.style.backgroundColor = 'hsl('+Math.random()*255+',30%,60%)'
        }
        if (ball.offsetTop + ball.offsetHeight >= h) {
            ball.dataset['directY'] = -1
            ball.style.backgroundColor = 'hsl('+Math.random()*255+',30%,60%)'
        }
        if (ball.offsetTop <= 0) {
            ball.dataset['directY'] = 1
            ball.style.backgroundColor = 'hsl('+Math.random()*255+',30%,60%)'
        }
        ball.style.left = ball.offsetLeft + ball.dataset['directX'] * 2 + 'px'
        ball.style.top = ball.offsetTop + ball.dataset['directY'] * 4 + 'px'
    }
    requestAnimationFrame(move)
}

move()
//监听窗口的变化,重置窗口大小
window.onresize = function () {//改变窗口大小之后  重置w和h的值
    w = document.body.clientWidth
    h = document.body.clientHeight
}